<template>
  <div class="create-contract">
    <van-nav-bar
      left-arrow
      class="title-bar"
      title="签约信息"
      :border="false"
      @click-left="backDelete"
    />
    <van-field
      class="field-name"
      center
      v-model="templateTableDto.templateName"
      label="任务名称"
      placeholder="必填"
    />
    <van-cell
      class="appearance"
      center
      title="业务类型"
      :value="templateTableDto.businessType"
      is-link
    />
    <van-cell
      class="appearance"
      center
      title="签约截止时间"
      :value="templateTableDto.signingEndTime"
      is-link
    />
    <van-cell
      class="appearance"
      center
      title="文件到期日期"
      :value="templateTableDto.terminatedTime"
      is-link
    />
    <van-cell class="appearance on-off" center title="顺序签署">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #default>
        <van-switch v-model="OrderSetdialogVisible" size="1.5em" />
      </template>
    </van-cell>
    <!-- 参与方 -->
    <div class="participant"><span>参与方</span></div>
    <div class="participation">
      <div class="sign-enterprise">
        <van-button icon="add-o" type="default" block>签约企业</van-button>
      </div>
      <div class="sign-name">
        <van-button icon="add-o" type="default" block>签约个人</van-button>
      </div>
      <div class="box">
        <div v-for="(item, index) in templateTableDto.signerList" :key="index">
          <div class="box-company" v-if="item.signerType === '1'">
            <div class="box-company-title">{{ item.orgName }}</div>
            <span class="box-company-content">{{ item.operatorName }}</span
            ><span class="box-company-num">{{ item.operatorContact }}</span>
          </div>
          <div class="box-personage" v-else>
            <div class="box-company-title">
              {{ item.operatorName }}<span>{{ item.operatorContact }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div v-for="(item, index) in templateTableDto.signerList" :key="index">
          <div class="box-company" v-if="item.signerType === '1'">
            <div class="box-company-title">{{ item.orgName }}</div>
            <span class="box-company-content">{{ item.operatorName }}</span
            ><span class="box-company-num">{{ item.operatorContact }}</span>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
          <div class="box-personage" v-else>
            <div class="box-company-title">
              {{ item.operatorName }}<span>{{ item.operatorContact }}</span>
            </div>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
        </div>
      </div>
    </div>
    <!-- 抄送方 -->
    <div class="participant"><span>抄送方</span></div>
    <div class="enterprise">
      <div class="enterprise-one">
        <van-button icon="add-o" type="default" block>抄送企业</van-button>
        <i class="low-i"></i>
        <van-button icon="add-o" type="default" block>抄送个人</van-button>
      </div>
      <div class="box">
        <div
          v-for="(item, index) in templateTableDto.recipientList"
          :key="index"
        >
          <div class="box-company" v-if="item.signerType === '1'">
            <div class="box-company-title">{{ item.orgName }}</div>
            <span class="box-company-content">{{ item.userName }}</span
            ><span class="box-company-num">{{ item.userMobile }}</span>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
          <div class="box-personage" v-else>
            <div class="box-company-title">
              {{ item.userName }}<span>{{ item.userMobile }}</span>
            </div>
            <van-icon name="cross" @click="deleteSignar(index)" />
          </div>
        </div>
      </div>
    </div>
    <div class="participant"><span>合同文件</span></div>
    <!-- 合同文件 -->
    <div class="file">
      <div
        class="text-img"
        v-for="(item, index) in templateTableDto.fileList"
        :key="index"
      >
        <div class="text-box">
          <img src="@/assets/文件图.png" alt="" />
        </div>
        <div class="text-span">{{ item.fileName }}</div>
      </div>
    </div>
    <div class="participant"><span>附属文件</span></div>
    <!-- 附属文件 -->
    <div class="file">
      <div
        class="text-img"
        v-for="(item, index) in templateTableDto.fileList"
        :key="index"
      >
        <div class="text-box">
          <img src="@/assets/文件图.png" alt="" />
        </div>
        <div class="text-span">{{ item.fileName }}</div>
      </div>
    </div>
    <div class="add-text-end">
      <van-button type="info" block @click="checkParams">下一步</van-button>
    </div>
  </div>
</template>

<script>
import { messageTemplate } from '@/api/user'
export default {
  data() {
    return {
      user: {
        name: ''
      },
      // 顺序
      OrderSetdialogVisible: true,
      fileList: [],
      templateTableDto: {
        templateId: '',
        templateCode: '',
        templateName: '',
        businessType: '',
        businessTypeName: '',
        status: '',
        signFiles: 0,
        attachFiles: 0,
        signerOrderStatus: true,
        fileList: [],
        signerList: [],
        recipientList: [],
        signingEndTime: '', // 合同签署过期时间
        terminatedTime: '', // 合同到期时间
        watermark: false
      }
    }
  },
  created() {
    this.infoList()
  },
  mounted() {},
  methods: {
    // 获取模板信息
    async infoList() {
      try {
        const { data: res } = await messageTemplate({
          templateId: this.$route.params.contractAll.id,
          templateCode: this.$route.params.contractAll.templateCode
        })
        if (res.code !== '0') {
          return this.$toast.fail(res.msg)
        }
        this.templateTableDto.templateId = res.data.templateId
        this.templateTableDto.templateCode = res.data.templateCode
        this.templateTableDto.businessType = res.data.businessType
        this.templateTableDto.templateName = res.data.templateName
        this.templateTableDto.status = res.data.status
        this.templateTableDto.signFiles = res.data.signFiles
        this.templateTableDto.attachFiles = res.data.attachFiles

        // 文件列表
        const fileShowList = []
        const fileDtoList = []
        for (const index in res.data.fileList) {
          const item = res.data.fileList[index]
          const fileShow = {
            fileId: item.fileId,
            fileType: item.fileType,
            fileName: item.fileName,
            filePath: item.filePath,
            filePages: item.filePages,
            fileStatus: 'success'
          }
          fileShowList.push(fileShow)
          const fileDto = {
            fileId: item.fileId,
            fileType: item.fileType,
            fileName: item.fileName,
            filePath: item.filePath,
            filePages: item.filePages
          }
          fileDtoList.push(fileDto)
        }
        this.fileList = fileShowList
        this.templateTableDto.fileList = fileDtoList

        // 参与人列表
        const signerList = []
        for (const index in res.data.signerList) {
          const item = res.data.signerList[index]
          const signer = {}
          if (item.signerType === '1') {
            // 企业
            signer.orgName = item.orgName
          } else if (item.signerType === '2') {
            // 个人
            signer.orgName = ''
          }
          signer.id = item.id
          signer.signerType = item.signerType
          signer.signerName = item.signerName
          signer.signer = item.signer
          signer.operatorContact = item.operatorContact
          signer.operatorIdnumber = item.operatorIdnumber
          if (item.signer === '3') {
            signer.operatorName = item.operatorName
          }
          signer.sealTypeList = item.sealTypeList
          signerList.push(signer)
        }
        this.templateTableDto.signerList = signerList

        // 抄送人列表
        const recipientList = []
        for (const index in res.data.recipienList) {
          const item = res.data.recipienList[index]
          const recipien = {}
          recipien.id = item.op
          recipien.recipientType = item.recipienType
          recipien.orgName = item.orgName
          recipien.operatorName = item.operatorName
          recipien.operatorContact = item.operatorContact
          recipien.userIdnumber = item.userIdnumber
          recipien.orgIdnumber = item.orgIdnumber
          recipientList.push(recipien)
        }
        this.templateTableDto.recipientList = recipientList
        console.log(this.templateTableDto.signerList)
      } catch (error) {
        console.log(error)
      }
    },
    backDelete() {
      this.$store.commit('deleteAll')
      this.$router.push('/contract')
    },
    // 参数检查
    checkParams() {}
  }
}
</script>

<style scoped lang="less">
.create-contract {
  background-color: #f8f8f8;
  padding-top: 88px;
  .title-bar {
    height: 88px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    /deep/.van-nav-bar__title {
      font-size: 34px;
      font-weight: bold;
    }
    /deep/.van-icon {
      font-size: 40px;
      color: #000;
    }
  }
  .field-name {
    height: 108px;
    margin-top: 20px;
    padding: 0 41px;
    font-size: 30px;
    /deep/.van-field__control {
      text-align: right;
    }
    /deep/.van-field__label {
      color: #000;
    }
  }
  .appearance {
    height: 108px;
    font-size: 30px;
    padding: 0 41px;
    .van-cell__value {
      color: #000;
    }
  }
  .on-off {
    margin-top: 20px;
  }
  // 参与方
  .participant {
    padding: 20px 41px;
    font-size: 26px;
    color: #9f9f9f;
  }
  .participation {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding-top: 28px;
    .box {
      // 企业盒子
      .box-company {
        position: relative;
        width: 670px;
        height: 148px;
        padding: 0 36px;
        margin-bottom: 28px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          margin-top: 30px;
          font-size: 30px;
        }
        .box-company-content {
          font-size: 26px;
          color: #666666;
          margin-right: 10px;
        }
        .box-company-num {
          font-size: 26px;
          color: #666666;
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
      // 个人盒子
      .box-personage {
        position: relative;
        width: 670px;
        height: 100px;
        padding: 0 36px;
        line-height: 100px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          font-size: 30px;
          span {
            font-size: 26px;
            color: #666666;
            margin-left: 10px;
          }
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
    }
    .sign-enterprise {
      width: 670px;
      height: 148px;
      margin-bottom: 28px;
      .van-button {
        height: 100%;
        font-size: 30px;
        background-color: #f2f8ff;
        border: 1px dashed #bedcff;
        color: #2489f2;
      }
    }
    .sign-name {
      width: 670px;
      height: 100px;
      margin-bottom: 28px;
      .van-button {
        height: 100%;
        font-size: 30px;
        background-color: #f2f8ff;
        border: 1px dashed #bedcff;
        color: #2489f2;
      }
    }
  }
  .enterprise {
    .enterprise-one {
      height: 98px;
      width: 100%;
      display: flex;
      align-items: center;
      background-color: #fff;
      .van-button {
        height: 100%;
        border-width: 0;
        color: #2489f2;
        font-size: 30px;
      }
      .low-i {
        width: 1px;
        height: 42px;
        border-left: 1px solid #f2f2f2;
      }
    }
    .box {
      // 企业盒子
      .box-company {
        position: relative;
        width: 670px;
        height: 148px;
        margin: 28px 40px;
        padding: 0 36px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          margin-top: 30px;
          font-size: 30px;
        }
        .box-company-content {
          font-size: 26px;
          color: #666666;
          margin-right: 10px;
        }
        .box-company-num {
          font-size: 26px;
          color: #666666;
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
      // 个人盒子
      .box-personage {
        position: relative;
        width: 670px;
        height: 100px;
        margin: 28px 40px;
        padding: 0 36px;
        line-height: 100px;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        border-radius: 10px;
        .box-company-title {
          font-size: 30px;
          span {
            font-size: 26px;
            color: #666666;
            margin-left: 10px;
          }
        }
        .van-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #b0b0b0;
          font-size: 30px;
        }
      }
    }
  }
  // 合同文件
  .file {
    width: 100%;
    box-sizing: border-box;
    padding: 28px 40px 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    .text-img {
      display: flex;
      width: 148px;
      flex-direction: column;
      margin-bottom: 28px;
      .text-box {
        height: 120px;
        width: 120px;
        text-align: center;
        padding-top: 20px;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #e4e4e4;
        img {
          height: 80px;
          width: 70px;
        }
      }
      .text-span {
        color: #101010;
        margin-top: 10px;
        font-size: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  // 提交
  .add-text-end {
    height: 136px;
    width: 100%;
    margin-top: 32px;
    padding: 20px 40px;
    box-sizing: border-box;
    background-color: #fff;
  }
}
</style>
